<template>
  <ul class="list">
    <li class="list-item" v-for="(item, index) in upList" :key="index">
      {{ item }}</li>
  </ul>
</template>

<script setup>
import { computed } from 'vue';

const porps = defineProps({   //porps自己定义的
  list: {
    type: Array,
    default: () => []
  }

})

const upList=computed(() => {
  let res=[]
   porps.list.forEach((item, index) => {
    res.push(item.toUpperCase())
  })
  console.log(porps.list);
  return res
})
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
  margin-top: 10px;
}

li {
  list-style: none;
  height: 30px;
  width: 204px;
  padding: 4px 10px;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 2px;
}
</style>